<template>
  <div id="app">
    <div class="page">
      <div class="title">设计态</div>
      <div class="boxShadow">
        <testComponentDesign v-bind="props"></testComponentDesign>
      </div>
      
      <div class="title">运行态</div>
      <div class="boxShadow">
        <testComponent v-bind="props"></testComponent>
      </div>
      
    </div>
    <div class="componentConfig">
      <div class="title">默认属性面板</div>
      <div class="boxShadow">
        <vue-form v-model="props" :schema="schema" :form-footer="{show: false}" :form-props="formProps"></vue-form>
      </div>
      
    </div>
  </div>
</template>

<script>
import { path, mapValues, omitBy, flow } from "lodash/fp";

// 默认属性面板
import vueForm from '@lljj/vue-json-schema-form';
import testComponent from "@/components/testComponent/runtime/testComponent.vue";
import testComponentDesign from "@/components/testComponent/design-time/index.vue";
import testComponentJson from "@/components/testComponent/component.json"

// 从组件声明获取属性默认值
const getDefaultValuesFromDefinition = flow(
  path("props.properties"),
  mapValues("default"),
  omitBy(val => val === undefined)
);

export default {
  name: 'App',
  components: {
    testComponent,
    testComponentDesign,
    vueForm
  },
  data(){
    return{
      props: getDefaultValuesFromDefinition(testComponentJson),
      schema: testComponentJson.props,
      formProps: {
        labelPosition: 'left',
        labelWidth: "120px",
        labelSuffix: '',
        size: "small"
      }
    }
  }
}
</script>

<style>
*{
  padding: 0px;
  margin: 0px;
}
#app{
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  justify-content: space-around;
}

.boxShadow{
  border: 1px solid #eee;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  padding: 10px 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.title{
  font-size: 14px;
  padding: 10px 10px;
  border: 1px solid #eee;
  border-radius: 3px;
  box-sizing: border-box;
}

.page{
  width: 60vw;
  height: 100vh;
}

.componentConfig{
  width: 40vw;
  padding: 0px 10px;
  box-sizing: border-box;
  height: 100vh;
}
</style>
